import {mapGetters , mapMutations,mapActions} from "vuex";
import { playMode } from "@/common/js/config";
import { shuffle } from "@/common/js/util";
import Song from "@/common/js/SongObject";
export const playlistMixin = {
    // data(){
    //     return {
    //         name: 'playlistMixin'
    //     }
    // },
    computed:{
        ...mapGetters([
            'playlist'
        ])
    },
    mounted (){
        this.handlePlaylist(this.playlist)
    },
    activated(){//keep-alive组件切换过来会触发
        this.handlePlaylist(this.playlist)
    },
    watch:{
        playlist(newVal){
            this.handlePlaylist(newVal)
        }
    },
    methods:{
        handlePlaylist(){
            throw new Error('component musst implement handlePlaylist method')
        }
    }
}

export const playerMixin = {
    computed:{
        ...mapGetters([
            "currentSong",
            "currentIndex",
            "mode",
            "playlist",
            "playing",
            "sequenceList",
            "favoriteList"
          ]),
          //计算播放模式
    modeIcon() {
        return this.mode === playMode.loop
          ? "icon-play-oneloop"
          : this.mode === playMode.sequence
            ? "icon-play-sequence"
            : "icon-play-random";
      }
    },
    methods:{
          //点击切换播放模式
    changeMode() {
        const play_mode = (this.mode + 1) % 3;
        this.set_mode_state(play_mode);
        let list = null;
        if (play_mode === playMode.random) {
          list = shuffle(this.sequenceList);
        } else {
          list = this.sequenceList;
        }
        this.resetCurrentIndex(list);
        //修改播放的列表
        this.set_playlist(list);
      },
      //点击切换播放模式后，希望当前这个歌的index不要改变，这个歌后面才开始是选择的模式播放
      resetCurrentIndex(list) {
        let index = list.findIndex(item => {
          return item.id === this.currentSong.id;
        });
        this.set_current_index(index);
      },
       // 检查收藏列表中是否有当前歌曲
      checkCurFavorite(song) {
          const index = this.favoriteList.findIndex(item => {
               return  item.id === song.id;
      });
          return index > -1
       },
       // 计算当前歌曲有没有被收藏的样式
      favoriteIcon(song) {
        return this.checkCurFavorite(song) ?  "iconfont icon-aixin1":"iconfont icon-xinchangtai"  ;
      },
      // 点击爱心，收藏或取消收藏
      toggleFavorite(song) {
        if(this.checkCurFavorite(song)){
             this.deleteFavorite(song)
           }else{
              this.saveFavorite(song)
        }
    },
      ...mapMutations({
        changePlaying: "SET_PLAYING_SATATE",
        set_current_index: "SET_CURRENT_INDEX",
        set_mode_state: "SET_MODE_STATE",
        set_playlist: "SET_PLAYLIST"
      }),
      ...mapActions([
         "saveFavorite",
         "deleteFavorite"
      ])
    }
}

export const searchMixin = {
  data(){
    return{
      query:'',
      delayTime:100,//scroll的重新计算时间
    }
  },
  computed:{
    ...mapGetters(["searchHistory"]),
  },
  methods:{
    //当query发生变化时触发
    onQueryChange(query) {
        this.query = query;
    },
    blurInput() {
        this.$refs.SearchBox.blur();
    },
    //保存搜索的结果
    saveSearch() {
      this.saveSearchHistory(this.query);
    },
    //将选择的记录添加到input框
    searchToInpput(e) {
      //在父组件中调用子组件的方法，设置query的值
      this.$refs.SearchBox.setQuery(e);
    },
    //删除历史记录中的某一项
    delete_historyOne(e) {
      this.removeSearchHistory(e);
    },
    ...mapActions([
      "removeSearchHistory",
      "saveSearchHistory"
    ])
  }
}

// 点击songlist的播放歌曲（add-song,user-center公用的js代码）
export const songListMixin = {
  data(){
    return{
      currentIndex: 0,
    }
  },
  computed:{
    ...mapGetters(['playHistory'])
  },
  methods:{
     // 切换switch-Item
     switchItem(index) {
      this.currentIndex = index;
    },
    // 将选中的歌曲插入到播放列表当中
    selectSong(obj) {
      let song = obj.song;
      if (obj.index > 0) {
        this.insertSong(new Song(song));
        this.showTopTip()
      }
    },
    //将选中的歌插入到播放列表
    toSelectSong(obj) {
      let song = obj.song;
        this.insertSong(new Song(song));
        this.showTopTip()
    },
    showTopTip(){
      this.$refs.topTip.show()
    },
    ...mapActions(["insertSong"])
  }
}
